<!doctype html>
<html>
<head>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>教学管理数据驾驶舱</title>
<link type="text/css" href="css/public.css" rel="stylesheet">
<link type="text/css" href="css/index.css" rel="stylesheet">
<script type="text/javascript">
        document.documentElement.style.fontSize = document.documentElement.clientWidth /768*100 + 'px';
</script>

<script src="js/echarts.min.js"></script>
<!--数字增长累加动画-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/jquery.numscroll.js" type="text/javascript" charset="utf-8"></script>
<script>
	// 数据变量区
	var dv={
		scBeginTermIndex:0,
		scEndTermIndex:0,
		aeBeginTermIndex:0,
		aeEndTermIndex:0,
		theTerm:20161,

		summaryData:{},
		deptPercentData:[],
		scNumData:[],
		gzlTop5Data:[],
		aePercentData:[],
		theTermInfo:{},
		pointTop50Data:[]
	};
	// 绑定方法7个
	// 1.呈现数据总览
	function renderSummary(){
		if(!$.isEmptyObject(dv.summaryData)){
			$(".shu1").text(dv.summaryData["snum"]);
			$(".shu2").text(dv.summaryData["tnum"]);
			$(".shu3").text(dv.summaryData["cnum"]);
			$(".shu4").text(dv.summaryData["scnum"]);
			$(".shu1").numScroll();
			$(".shu2").numScroll();
			$(".shu3").numScroll();
			$(".shu4").numScroll();
		}
	}

	// 2.呈现学院学生人数占比
	function renderDeptPercent(){
		var legendData=[],seriesData=[];
		if(dv.deptPercentData && dv.deptPercentData.length>0){
			dv.deptPercentData.forEach(it=>{
				legendData.push(it.sdept);
				seriesData.push({name:it.sdept,value:it.per})
			})
			var option = {
			title: {
				text: '数据情况统计',
				subtext: '',
				left: 'right',
				textStyle: {
					color: '#fff',
					fontSize: 12
				}
			},
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b} : {c} ({d}%)'
			},
			legend: {
				// orient: 'vertical',
				// top: 'middle',
				type: 'scroll',
				orient: 'vertical',
				right: 10,
				top: 40,
				bottom: 20,
				left: 'right',
				data: legendData,
				textStyle: {
					color: '#fff',
					fontSize: 12
				}

			},
			grid:{
				x:'-10%',
				y:40,
				x2:20,
				y2:20,
			},
			color : [ '#09d0fb', '#f88cfb', '#95f8fe', '#f9f390',  '#ecfeb7' ],
			series: [
				{
					name:"人数占比",
					type: 'pie',
					radius: '65%',
					center: ['50%', '50%'],
					selectedMode: 'single',
					data: seriesData,
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}
			]
		};
			var myChart = echarts.init(document.getElementById('chartmain_bing'));
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		}
		
	}

	function termFormat(term){
		var seasons=['春','秋'];
		return Math.floor(term/10)+seasons[term % 10];
	}
	// 3.呈现学期选课人数统计
	function renderTermScNum(endIndex){
		var defaultNum =10;
		if(dv.scNumData && dv.scNumData.length>0){
			dv.scBeginTermIndex = endIndex - defaultNum >0 ? endIndex - defaultNum + 1 : 0;
			if(dv.scBeginTermIndex + defaultNum >= dv.scNumData.length){
				dv.scEndTermIndex = dv.scNumData.length -1;
			}

			var dataAxis = [];
			var data = [];
			var yMax = 0;
			var dataShadow = [];
			
			for(var i=dv.scBeginTermIndex;i<=dv.scEndTermIndex;i++){
				dataAxis.push(termFormat(dv.scNumData[i].cterm));
				data.push(dv.scNumData[i].num);
				if(dv.scNumData[i].num>yMax){
					yMax = dv.scNumData[i].num;
				}
				
			}
			yMax = yMax+1;
			for (var i = 0; i < data.length; i++) {
				dataShadow.push(yMax);
			}
		
			var option = {
				title: {
					text: '',
					subtext: ''
				},
				grid:{
					x:40,
					y:40,
					x2:20,
					y2:20,
					
				},
				xAxis: {
					data: dataAxis,
					axisLabel: {
						/*inside: true,*/
						interval:0,
						textStyle: {
							color: '#fff',
							fontSize: 12
							
						}
					},
					axisTick: {
						show: false,
					},
					axisLine: {
						show: true,
						symbol:['none', 'arrow'],
						symbolOffset: 12,
						lineStyle:{
							color: '#fff',
						}
					},
					z: 10
				},
				yAxis: {
					type: 'value',
					name: '单位：门',
					axisLine: {
						show: true,
						symbol: ['none', 'arrow'],
						symbolOffset: 12,
						lineStyle:{
							color: '#fff',
						}
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						textStyle: {
							color: '#fff',
							fontSize: 12
						}
					}
				},

				dataZoom: [
					{
						type: 'inside'
					}
				],
				series: [
					{ // For shadow
						type: 'bar',
						itemStyle: {
							color: 'rgba(0,0,0,0.05)'
						},
						barGap: '-100%',
						barCategoryGap: '40%',
						data: dataShadow,
						animation: false
					},
					{
						type: 'bar',
						itemStyle: {
							color: new echarts.graphic.LinearGradient(
								0, 0, 0, 1,
								[
									{offset: 0, color: '#0efdff'},
									{offset: 0.5, color: '#188df0'},
									{offset: 1, color: '#188df0'}
								]
							)
						},
						emphasis: {
							itemStyle: {
								color: new echarts.graphic.LinearGradient(
									0, 0, 0, 1,
									[
										{offset: 0, color: '#2378f7'},
										{offset: 0.7, color: '#2378f7'},
										{offset: 1, color: '#0efdff'}
									]
								)
							}
						},
						data: data
					}
				]
			};
			//获取dom容器
			var myChart = echarts.init(document.getElementById('chartmain'));
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
			$("#scTermLabel").text(termFormat(dv.scNumData[dv.scBeginTermIndex].cterm)+' 至 '+termFormat(dv.scNumData[dv.scEndTermIndex].cterm));
		}
	}

	// 4.呈现工作量排行
	function renderGzlTop5(){
		var styleClass='';
		var theMaxGzl=1;
		var theWidth=100;
		var template= '<li><div class="liIn {styleClass}">'
                 +'<div class="liIn_left"><span class="bot"></span><span class="zi">{tno}{tname}</span></div>'
                 +'<div class="liIn_line"><div class="line_lineIn" style="width:{theWidth}%;"></div></div>'
                 +'   <p class="num">{gzl} ({theWidth}%)</p></div></li>';
		var html = '';
		if(dv.gzlTop5Data && dv.gzlTop5Data.length>0){
			for(var i=0;i<dv.gzlTop5Data.length;i++){
				if(i==0){
					theMaxGzl = dv.gzlTop5Data[0].gzl;
					theWidth = 100;
					styleClass = '';
				}else{
					styleClass = 'liIn' + (i+1);
					theWidth = Math.round(dv.gzlTop5Data[i].gzl * 100 / theMaxGzl,2);
				}
				var liHtml = template.replace('{styleClass}',styleClass);
				liHtml = liHtml.replaceAll('{tno}',dv.gzlTop5Data[i].tno);
				liHtml = liHtml.replaceAll('{tname}',dv.gzlTop5Data[i].tname);
				liHtml = liHtml.replaceAll('{theWidth}',theWidth);
				liHtml = liHtml.replaceAll('{gzl}',dv.gzlTop5Data[i].gzl);
				html += liHtml;
			}
			$('#gzlTop5Box').html(html);
		}


	}
	
	// 5.呈现AE
	function renderAePercent(endIndex){
		var xdata=[];
		var adata=[];
		var edata=[];
		var defaultNum =10;
		if(dv.aePercentData && dv.aePercentData.length>0){
			dv.aeBeginTermIndex = endIndex - defaultNum >0 ? endIndex - defaultNum + 1 : 0;
			if(dv.aeBeginTermIndex + defaultNum >= dv.aePercentData.length){
				dv.aeEndTermIndex = dv.aePercentData.length -1;
			}
			for(var i=dv.aeBeginTermIndex;i<=dv.aeEndTermIndex;i++){
				xdata.push(termFormat(dv.aePercentData[i].cterm));
				adata.push(dv.aePercentData[i].aper);
				edata.push(dv.aePercentData[i].eper);				
			}

			var option = {
				title: {
					text: ''
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					textStyle: {
						color: '#fff',
						fontSize: 12,
					},
					right:'40%',
					data: ['优秀率', '不及格率']
				},
				grid:{
						x:40,
						y:40,
						x2:20,
						y2:20,
					},
				toolbox: {
					feature: {
						//saveAsImage: {}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					axisLabel: {
									/*inside: true,*/
									interval:0,
									textStyle: {
										color: '#fff',
										fontSize: 12
										
									}
					},
					axisTick: {
						show: false,
					},
					axisLine: {
						show: true,
						symbol:['none', 'arrow'],
						symbolOffset: 12,
						lineStyle:{
							color: '#fff',
						}
					},
					data: xdata
				},
				yAxis: {
					type: 'value',
					
					axisLine: {
						show: true,
						symbol: ['none', 'arrow'],
						symbolOffset: 12,
						lineStyle:{
							color: '#fff',
						}
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						textStyle: {
							color: '#fff',
							fontSize: 12
						}
					}
				},
				series: [
					{
						name: '优秀率',
						type: 'line',
						stack: '%',
						data: adata,
						itemStyle: {
							normal: {
							color: "#0efdff",//折线点的颜色
							lineStyle: {
							color: "#0efdff",//折线的颜色
							width:2,
							}
							},
						}
					},
					{
						name: '不及格率',
						type: 'line',
						stack: '%',
						data: edata
					},
				]
			};		
			//获取dom容器
			var myChart = echarts.init(document.getElementById('chartmain_zhe'));
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
			$("#aeTermLabel").text(termFormat(dv.scNumData[dv.scBeginTermIndex].cterm)+' 至 '+termFormat(dv.scNumData[dv.scEndTermIndex].cterm));
		
		}
	}
	
	// 6.呈现学期运行信息
	function renderTermInfo(){
		if(!$.isEmptyObject(dv.theTermInfo)){
			$(".shu5").text(dv.theTermInfo["tnum"]);
			$(".shu6").text(dv.theTermInfo["cnum"]);
			$(".shu7").text(dv.theTermInfo["snum"]);
			$(".shu8").text(dv.theTermInfo["ctr"]);
			$(".shu9").text(dv.theTermInfo["scr"]);
			$(".shu10").text(dv.theTermInfo["ycnum"]);

			$(".shu5").numScroll();
			$(".shu6").numScroll();
			$(".shu7").numScroll();
			$(".shu8").numScroll();
			$(".shu9").numScroll();
			$(".shu10").numScroll();
		}
	}
	
	// 7.呈现绩点排名前50
	function renderSpointTop50(){
		var template='<ul class="ul_con">'
			+'     <li>{no}</li>'
			+'     <li>{sno}</li>'
			+'     <li>{sname}</li>'
			+'     <li>{sclass}</li>'
			+'     <li>{pointSum}</li></ul>';
		var html = '';
		if(dv.pointTop50Data && dv.pointTop50Data.length>0){
			for(var i=0;i<dv.pointTop50Data.length;i++){
				var liHtml = template.replace('{no}',i+1);
				liHtml = liHtml.replace('{sno}',dv.pointTop50Data[i].sno);
				liHtml = liHtml.replace('{sname}',dv.pointTop50Data[i].sname);
				liHtml = liHtml.replace('{sclass}',dv.pointTop50Data[i].sclass);
				liHtml = liHtml.replace('{pointSum}',dv.pointTop50Data[i].pointSum);
				html+=liHtml;
			}
			$('#pointTop50Box').html(html);
		}
	}

	// jquery.ajax 数据请求
	function request(url,method,dataObject,successCallback,errorCallback) {
		var newurl = location.origin +'/dev-api/' + url;
		method = method || "GET";
		$.ajax({
              type: method,
              url: newurl,
              async: false,
              data: JSON.stringify(dataObject),
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              headers: {
                Authorization:'Bearer '+$.cookie('Admin-Token')
              },
              success: function(data) {
                successCallback(data);
              },
              error: function(e){
				console.log('请求数据出错：'+url+'。详见如下：');
				console.log(e);
                errorCallback(e);
              }
        });
	}

	// 页面加载时，请求数据并绑定
	$(function(){
		request('jxgl/dv/summary',null,null,function(response){
			//success
			if(response.data && response.data.length>0){
				dv.summaryData=response.data[0];
				renderSummary();
			}			
		},function(e){
			//error
		});

		request('jxgl/dv/deptPercent',null,null,function(response){
			//success
			dv.deptPercentData=response.rows;
			renderDeptPercent();
		},function(e){
			//error
		});

		request('jxgl/dv/scNum',null,null,function(response){
			//success
			dv.scNumData=response.rows;
			if(dv.scNumData && dv.scNumData.length>0){
				renderTermScNum(dv.scNumData.length-1);
			}			
		},function(e){
			//error
		});

		request('jxgl/dv/gzlTop5',null,null,function(response){
			//success
			dv.gzlTop5Data=response.rows;
			renderGzlTop5();			
		},function(e){
			//error
		});

		request('jxgl/dv/aePercent',null,null,function(response){
			//success,null
			dv.aePercentData=response.rows;
			if(dv.aePercentData && dv.aePercentData.length>0){
				renderAePercent(dv.aePercentData.length-1);
			}			
		},function(e){
			//error
		});

		request('jxgl/dv/theTermInfo/'+dv.theTerm,null,null,function(response){
			//success
			if(response.total>0){
				dv.theTermInfo=response.rows[0];
				renderTermInfo();
			}
						
		},function(e){
			//error
		});

		request('jxgl/dv/pointTop50',null,null,function(response){
			//success
			dv.pointTop50Data=response.rows;
			renderSpointTop50();			
		},function(e){
			//error
		});

	});

</script>
    
</head>
<style>
	.abc{ }
</style>

<body>
<div class="bg">
	<div class="title">教学管理数据驾驶舱系统</div>
    <div class="leftMain">
    	<div class="leftMain_top">
        	<div class="leftMain_topIn">
            	<ul>
                	<li>
                        <div class="liIn">
                            <h3>学生人数</h3>
                            <p class="shu"><span class="shu1"></span><i>人</i></p>
                            <span class="border_bg_leftTop"></span>
                            <span class="border_bg_rightTop"></span>
                            <span class="border_bg_leftBottom"></span>
                            <span class="border_bg_rightBottom"></span>
                        </div>
                    </li>
                	<li>
                        <div class="liIn">
                            <h3>教师人数</h3>
                            <p class="shu"><span class="shu2"></span><i>人</i></p>
                            <span class="border_bg_leftTop"></span>
                            <span class="border_bg_rightTop"></span>
                            <span class="border_bg_leftBottom"></span>
                            <span class="border_bg_rightBottom"></span>
                        </div>
                    </li>
                	<li>
                        <div class="liIn">
                            <h3>课程门数</h3>
                            <p class="shu"><span class="shu3"></span><i>门</i></p>
                            <span class="border_bg_leftTop"></span>
                            <span class="border_bg_rightTop"></span>
                            <span class="border_bg_leftBottom"></span>
                            <span class="border_bg_rightBottom"></span>
                        </div>
                    </li>
                	<li>
                        <div class="liIn">
                            <h3>开课总数</h3>
                            <p class="shu"><span class="shu4"></span><i>门</i></p>
                            <span class="border_bg_leftTop"></span>
                            <span class="border_bg_rightTop"></span>
                            <span class="border_bg_leftBottom"></span>
                            <span class="border_bg_rightBottom"></span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="leftMain_middle">
        	<div class="leftMain_middle_left">
            	<div class="leftMain_middle_leftIn">
                	<h3>学期开课数统计</h3>
					<div class="conditions">
						<button style="color:white;border: solid 1px white;"
						onclick="scTermClickHandler()"
						>&lt;</button>
					    <span id="scTermLabel"></span>	
						<button style="color:white;border: solid 1px white;">&gt;</button>
					</div>
                    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                    <div class="biaoge" style="width:100%; height:25vh" id="chartmain"></div>
                    <span class="border_bg_leftTop"></span>
                    <span class="border_bg_rightTop"></span>
                    <span class="border_bg_leftBottom"></span>
                    <span class="border_bg_rightBottom"></span>
                </div>
            </div>
        	<div class="leftMain_middle_right">
            	<div class="leftMain_middle_rightIn">
                	<h3>教学任务量排名前5</h3>
                    <div class="biaoge biaoge_pai" style="width:100%; height:25vh">
                    	<div class="biaoge_paiIn">
                        	<ul id="gzlTop5Box"></ul>
                        </div>
                    </div>
                    <span class="border_bg_leftTop"></span>
                    <span class="border_bg_rightTop"></span>
                    <span class="border_bg_leftBottom"></span>
                    <span class="border_bg_rightBottom"></span>
                </div>
            </div>
        </div>
        <div class="leftMain_middle">
        	<div class="leftMain_middle_left">
            	<div class="leftMain_middle_leftIn">
                	<h3 style="display: inline-block;">学期优秀率、不及格率</h3>
					<div class="conditions">
						<button style="color:white;border: solid 1px white;">&lt;</button>
					    <span id="aeTermLabel"></span>	
						<button style="color:white;border: solid 1px white;">&gt;</button>
					</div>
                    <div class="biaoge" style="width:100%; height:25vh" id="chartmain_zhe"></div>
                    <span class="border_bg_leftTop"></span>
                    <span class="border_bg_rightTop"></span>
                    <span class="border_bg_leftBottom"></span>
                    <span class="border_bg_rightBottom"></span>
                </div>
            </div>
        	<div class="leftMain_middle_right">
            	<div class="leftMain_middle_rightIn">
                	<h3>学期数据统计</h3>
					<div class="conditions">
						<button style="color:white;border: solid 1px white;">&lt;</button>
					    <span>2014秋</span>	
						<button style="color:white;border: solid 1px white;">&gt;</button>
					</div>
                    <div class="biaoge biaoge_bi" style="width:100%; height:25vh">
                    	<ul>
                        	<li>
                            	<div class="liIn">
                                	<p class="shu shu5"></p>
                                    <p class="zi">教师总数</p>
                                </div>
                            </li>
                        	<li>
                            	<div class="liIn">
                                	<p class="shu shu6"></p>
                                    <p class="zi">开课门数</p>
                                </div>
                            </li>
                        	<li>
                            	<div class="liIn">
                                	<p class="shu shu7"></p>
                                    <p class="zi">选课人数</p>
                                </div>
                            </li>
                        	<li>
                            	<div class="liIn">
                                	<p class="shu shu8"></p>
                                    <p class="zi">课/师比</p>
                                </div>
                            </li>
                        	<li>
                            	<div class="liIn">
                                	<p class="shu shu9"></p>
                                    <p class="zi">生/课比</p>
                                </div>
                            </li>
                        	<li>
                            	<div class="liIn">
                                	<p class="shu shu10"></p>
                                    <p class="zi">异常课数</p></p></p></p>
                                </div>
                            </li>
                        </ul>
                    
                    </div>
                    <span class="border_bg_leftTop"></span>
                    <span class="border_bg_rightTop"></span>
                    <span class="border_bg_leftBottom"></span>
                    <span class="border_bg_rightBottom"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="rightMain">
        <div class="rightMain_top">
            <div class="rightMain_topIn">
                <h3>学院学生占比</h3>
                <div class="biaoge" style="width:100%; height:30vh" id="chartmain_bing"></div>
                <span class="border_bg_leftTop"></span>
                <span class="border_bg_rightTop"></span>
                <span class="border_bg_leftBottom"></span>
                <span class="border_bg_rightBottom"></span>
            </div>
         </div>
        <div class="rightMain_bottom">
            <div class="rightMain_bottomIn">
                <h3>绩点排名前50</h3>
                <div class="biaoge biaoge_list" style="width:100%; height:36vh">
                	<div class="biaoge_listIn">
                    	<ul class="ul_title">
                        	<li>排序</li>
                            <li>学号</li>
                            <li>姓名</li>
                            <li>班级</li>
                            <li>总绩点</li>
                        </ul>
                        <div class="ul_list">
                        	<div id="pointTop50Box" class="ul_listIn" >
                                
                            </div>
                       </div>
                   </div>
                
                </div>
                <span class="border_bg_leftTop"></span>
                <span class="border_bg_rightTop"></span>
                <span class="border_bg_leftBottom"></span>
                <span class="border_bg_rightBottom"></span>
            </div>
         </div>
    </div>
    <div style="clear:both;"></div>
</div>
</body>

</html>
